import React, { useEffect } from 'react'

const Home = (props) => {

  useLifePrint("Home")

  return <h2>Home</h2>
}

const About = (props) => {

  useLifePrint("About")

  return <h2>About</h2>
}

export default function CustomLifeHookDemo() {

  useLifePrint("CustomLifeHookDemo");

  return (
    <div>
      CustomLifeHookDemo
      <Home/>
      <About/>
    </div>
  )
}

//共同的逻辑抽取到 函数里
function useLifePrint(name) {
  useEffect(() => {
    // console.log(`${name}组件被渲染`);

    return () => {
      // console.log(`${name}组件被卸载`);
    }
  }, [name])
}


/**
 *  const arr = [1,2,3,[4,5,6],7,[8,9]];
    console.log(arr);
    
    function FlatArray(arr) {
      let newArr = [];
      for(const item of arr) {
        if (Array.isArray(item)) {
          console.log(item, '111');
          newArr = newArr.concat(FlatArray(item))
        }else {
          console.log(item, '222');
          newArr = newArr.concat(item)
        }
      }
      return newArr;
    }
    const flatArr = FlatArray(arr);
    console.log(flatArr);
 */